<template>
  <div>
    <el-form-item :prop="item.name || ''" :label="item.label" v-bind="item.formItemProps || {}" ref="el-form-item">
      <el-date-picker ref="input" :type="item.dateType" v-model="mvalue" v-bind="opt"></el-date-picker>
    </el-form-item>
  </div>
</template>

<script>
  import { objectAssign, formatDate } from "../../utils/common";
  import Required from "../validMixins/Required";

  export default {
    name: "PopoDatePicker",
    props: {
      value: { type: [String, Date] },
      item: { type: Object },
      formData: { type: Object },
    },
    mixins: [Required],
    data() {
      return {
        mvalue: this.value,
        opt: {},
      };
    },
    watch: {
      mvalue(date) {
        if (!date) return;

        // 如果不是要求返回Date，则返回格式化后的Date。
        // 格式化内容和 opt.dateFormat 一致
        if (!this.item.useDate) {
          date = formatDate(date, this.opt.dateFormat);
        }
        this.$emit("input", date);
      },
    },
    created() {
      var opt = objectAssign(
        {
          dateFormat: this.item.dateFormat || "yyyy-MM-dd",
          dateValueFormat: this.item.dateValueFormat || "yyyy-MM-dd",
          dateType: this.item.dateType || "date",
          prefixIcon: this.item.prefixIcon || "el-icon-date",
        },
        this.item.props
      );

      // opt.dateType = this.item.dateType !== undefined ? this.item.dateType : opt.dateType;

      this.opt = opt;
    },
    methods: {},
  };
</script>

<style scoped lang="scss">
::v-deep {
  .el-date-editor {
    width: 100%;
  }
}
</style>

